<template>
    <div class="login">
        <div class="login-header">
            <div class="header-main flex-start">
                <img src="../../assets/img/logo.svg" />
                <span>运营系统</span>
            </div>
        </div>
        <div class="login-main flex-grid">
            <div class="handle-main">
                <div class="handle-login">
                    <template v-if="start === 'login'">
                        <div class="login-title login-default">欢迎登录</div>
                        <LoginInput
                            class="mt20"
                            iconfont-name="iconyonghuming"
                            placeholder="请输入账号名或手机号"
                            title="账号"
                            :onKeyupEnter="submitForm"
                            v-model="loginForm.account"
                        ></LoginInput>
                        <LoginInput
                            class="mt10"
                            ref="password"
                            type="password"
                            iconfont-name="iconmima"
                            placeholder="请输入密码"
                            title="密码"
                            :onKeyupEnter="submitForm"
                            v-model="loginForm.password"
                        ></LoginInput>
                        <div class="mt10 flex flex--middle">
                            <span @click="initStart('password')" class="login-password ml10">忘记密码？</span>
                            <span @click="initStart('register')" class="login-register ml120">注册账号</span>
                        </div>
                        <qb-button @click="submitForm" class="login-btn">{{ isLoading ? '登录中...' : '登录' }}</qb-button>
                    </template>
                    <template v-else-if="start === 'password'">
                        <ResetPassword @redirect="initStart"></ResetPassword>
                    </template>
                    <template v-else-if="start === 'register'">
                        <Register @redirect="initStart"></Register>
                    </template>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import LoginInput from './components/loginInput'
    import Register from './components/register'
    import ResetPassword from './components/resetPassword'
    export default {
        name: 'login',
        components: {
            LoginInput,
            Register,
            ResetPassword
        },
        data() {
            return {
                start: 'login',
                loginForm: {
                    account: '',
                    password: ''
                },
                loginInfo: null
            }
        },
        computed: {
            isLoading() {
                return this.$store.state.loading.isLoading
            }
        },
        mounted() {
            if (this.$storage.get('loginFormAccount')) {
                this.loginForm.account = this.$storage.get('loginFormAccount') || ''
            }
        },
        methods: {
            initStart(val) {
                this.start = val
                this.loginForm.account = ''
                this.loginForm.password = ''
            },

            async login() {
                if (this.loginForm.account == '' || this.loginForm.password == '') {
                    return this.$message.error('账号或密码不能为空')
                }
                this.$storage.clear()
                const [res] = await this.$api.login.apiUserLogin({
                    loginAccount: this.loginForm.account,
                    loginPassword: this.loginForm.password,
                    clientId: this.$storage.get('clientId')
                })
                console.log('login成功', res)
                if (res) {
                    this.$storage.set('userId', res.userId)
                    this.$storage.set('accessToken', res.accessToken)
                    this.$storage.set('refreshToken', res.refreshToken)
                    this.$storage.set('loginFormAccount', this.loginForm.account)
                    this.loginInfo = res
                    this.getFactoryList()
                    // this.getWashVat()
                }
            },
            async getFactoryList() {
                let params = {
                    pageNO: 1,
                    pageSize: -1,
                    conditions: [
                        {
                            attributeName: 'enduserId', //UAC用户ID
                            rangeType: 'EQUAL',
                            targetValue: [this.loginInfo.userId]
                        }
                    ]
                }
                let [res] = await this.$api.login.getAccessibleOrganization(params)
                console.log('请求的哈哈哈', res)
                if (res) {
                    if (res.list.length > 0) {
                        this.$storage.set('factoryList', JSON.stringify(res.list))
                        this.$storage.set('currentFactory', JSON.stringify(res.list[0].orgInfo))
                        this.$storage.set('userInfo', JSON.stringify(res.list[0].userInfo))
                        this.$router.replace('/index')
                    } else {
                        this.$message.error('当前用户没有机构, 请先配置')
                    }
                }
            },
            submitForm() {
                this.login()
                // this.$message.success('登录成功')
                // this.$router.push('/index')
            }
        }
    }
</script>

<style lang="less" scoped>
    @import './index.less';
</style>
